<template>
  <div>
    <QueryForm :fields="fields" @search="handleSearch" @reset="handleReset" />
  </div>
</template>

<script setup>
import { reactive } from 'vue';
import QueryForm from './components/QueryForm.vue';

const fields = reactive([
  {
    name: 'name',
    label: '名称',
    type: 'text',
    placeholder: '请输入名称',
    value: '',
  },
  {
    name: 'type',
    label: '类型',
    type: 'select',
    placeholder: '请选择类型',
    options: [
      { label: '类型1', value: '1' },
      { label: '类型2', value: '2' },
    ],
    nextDependsOn: true, // 触发下一个字段的异步加载
  },
  {
    name: 'subType',
    label: '子类型',
    type: 'asyncSelect',
    placeholder: '请选择子类型',
    dependsOn: 'type', // 依赖 type 字段
    asyncOptions: [],
    asyncLoad: async (typeValue) => {
      // 模拟异步请求
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve([
            { label: `子类型A-${typeValue}`, value: `A-${typeValue}` },
            { label: `子类型B-${typeValue}`, value: `B-${typeValue}` },
          ]);
        }, 500);
      });
    },
  },
  {
    name: 'date',
    label: '日期',
    type: 'date',
    placeholder: '请选择日期',
  },
]);

const handleSearch = (formData) => {
  console.log('查询参数:', formData);
  // 发起查询请求...
};

const handleReset = () => {
  console.log('已重置表单');
};
</script>